<template>
	<view class="article-item-container" @click="$goPage('/article/publish')">
		<view class="personal-message">
			<view>
				<image src="../../static/a.jpg" class="personal-message-avatar"></image>
			</view>
			<view class="u-m-l-16">
				<p class="personal-message-name">某某某</p>
				<p class="personal-message-time">昨天 10:24</p>
				<view class="article-item-content">
					<text class="article-item-text">
						文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案
						文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案
					</text>
					<!-- 图片 -->
					<view class="u-flex u-flex-wrap" v-if="false">
						<view v-for="(img, index) in ImgPackJson">
							<images-item :item="img" :index="index" :imgjson="ImgPackJson"
							suffix="?imageMogr2/thumbnail/!30p" class="image-item"
							:style="imageStyle">				
							</images-item>
						</view>
					</view>	
					<!-- 视频 -->
			  	<view class="u-m-t-8 video-container" v-if="false">
						<view class="video-cover"
						:style="{'width': videoCoverWidth > videoCoverHeight ? '400rpx' : (videoCoverWidth * 400 / videoCoverHeight + 'rpx'),
						'height': videoCoverWidth <= videoCoverHeight ? '400rpx': (videoCoverHeight * 400 / videoCoverWidth + 'rpx'),
						'background': 'url(https://idock-1305057061.cos.ap-beijing.myqcloud.com/cms/2023-05-12/002034-s5fpmque.jpg)',
						'background-size': 'cover'
						 }"
						>
					
					<!-- 播放图标 -->
					<view class="video-cover-icon">
						<view class="triangle"></view>
					</view>
						</view>	 
					</view>	
					<!-- 文件 -->
					<view class="file-container">
						<view class="file-container-item">
							<i class="icon icon-video"></i>
							<text class="file-container-item-text">文案文案文案文案文案文案文案文.doc</text>
						</view>
						<view class="file-container-item">
							<i class="icon icon-tupian1"></i>
							<text class="file-container-item-text">文案文案文案文案文案文案文案文.cvs</text>
						</view>
					</view>
				</view>
			  <!-- 操作按钮如点赞、评论以及分享 -->
				<view class="oper-btn-container">
					<view class="oper-btn-container-item">
						<i class="icon icon-video"></i>
						<text class="oper-btn-container-item-num">1</text>
					</view>
					<view class="oper-btn-container-item">
						<i class="icon icon-tupian1"></i>
						<text class="oper-btn-container-item-num">2</text>
					</view>
					<view class="oper-btn-container-item">
						<i class="icon icon-video"></i>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { defineComponent,reactive,toRefs, onMounted } from "vue"
import ImagesItem from '@/components/images-item/index.vue'
	export default defineComponent({
		components: {
			ImagesItem
		},
		setup(props) {
			const data = reactive({
				ImgPackJson: [
					{
						Name: '',
						Src: 'https://idock-1305057061.cos.ap-beijing.myqcloud.com/cms/2023-05-12/002034-s5fpmque.jpg'
					},
					{
						Name: '',
						Src: 'https://idock-1305057061.cos.ap-beijing.myqcloud.com/cms/2023-05-12/002034-s5fpmque.jpg'
					},
					{
						Name: '',
						Src: 'https://idock-1305057061.cos.ap-beijing.myqcloud.com/cms/2023-05-12/002034-s5fpmque.jpg'
					},
					{
						Name: '',
						Src: 'https://idock-1305057061.cos.ap-beijing.myqcloud.com/cms/2023-05-12/002034-s5fpmque.jpg'
					},
					{
						Name: '',
						Src: 'https://idock-1305057061.cos.ap-beijing.myqcloud.com/cms/2023-05-12/002034-s5fpmque.jpg'
					}
				],
				imageStyle: {
					width1: 280,
					height1: 280,
					width2: 180,
					height2: 180,
				},
				videoCoverWidth: 0,
				videoCoverHeight: 0
			})
			onMounted(()=> {
				//计算视频封面图的大小
				uni.getImageInfo({
					src:'https://idock-1305057061.cos.ap-beijing.myqcloud.com/cms/2023-05-12/002034-s5fpmque.jpg',
					success: (image)=> {
						data.videoCoverWidth = image.width
						data.videoCoverHeight = image.height
					}
				})
			})
			return {
				...toRefs(data)
			}
		}
	})
</script>

<style lang="scss" scoped>
	.article-item-container {
		padding: 24rpx 32rpx;
		border-bottom: 1rpx solid rgba(0,0,0,0.1);
		.personal-message {
			display: flex;
			&-avatar {
				width: 72rpx;
				height: 72rpx;
				border-radius: 72rpx;
			}
			&-name {
				height: 36rpx;
				font-size: 26rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #000000;
				line-height: 30rpx;
				-webkit-background-clip: text;
			}
			&-time {
				height: 28rpx;
				font-size: 20rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: rgba(0,0,0,0.3);
				line-height: 23rpx;
				-webkit-background-clip: text;
			}
		}
		.article-item-content {
			width: 598rpx;
			margin-top: 20rpx;
			.article-item-text {
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #000000;
				line-height: 44rpx;
				overflow: hidden;
				display: -webkit-box;
				-webkit-line-clamp: 5;
				-webkit-box-orient: vertical;
			}
			.video-cover {
				position: relative;
				background-color: pink;
				.video-cover-image {
					position: absolute;
					top: 50%;
					left:50%;
					transform: translate(-50%,-50%);
				}
				.video-cover-icon {
					position: absolute;
					top: 50%;
					left:50%;
					z-index: 1;
					transform: translate(-50%,-50%);
					width: 96rpx;
					height: 96rpx;
					background: #FFFFFF;
					border-radius: 96rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					.triangle {
						width:0;
						height: 0;
						border-left: 23rpx solid transparent;
						border-right: 23rpx solid transparent;
						border-bottom: 40rpx solid #476BEE;
						transform: rotate(90deg);
					}
				}
			}
			.file-container {
				margin-top: 8rpx;
				&-item {
					display: flex;
					align-items: center;
					&-text {
						height: 39rpx;
						margin-left: 18rpx;
						font-size: 28rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #476BEE;
						line-height: 33rpx;
					}
				}
			}
		}
		.oper-btn-container {
			display: flex;
			justify-content: space-between;
			&-item {
				display: flex;
				align-items: center;
				.icon {
					font-size: 32rpx;
					font-weight: 400;
					color: rgba(0,0,0,0.6);
				}
				&-num {
					height: 45rpx;
					margin-left: 20rpx;
					font-size: 32rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: rgba(0,0,0,0.6);
					line-height: 38rpx;
				}
			} 
		}
	}
</style>